/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-08 15:15:05
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-02-09 16:55:54
 * @emial: lingchen.liu@bizfocus.cn
 */
import React, { FC, ReactElement, useRef } from 'react';
import './index.scss';


interface IAddInput {
    isInputShow: Boolean;
    addItem: (content: string) => void;
}
const AddInput: FC<IAddInput> = ({ isInputShow, addItem }): ReactElement => {


    const inputRef: any = useRef<HTMLInputElement>(null);

    const submitValue = ((): void => {
        const inputValue: string = inputRef.current.value.trim();
        if (inputValue.length === 0) {
            return;
        }
        addItem(inputValue);
        inputRef.current.value = ''

    })

    return (
        <>
            {
                isInputShow
                    ?
                    (
                        <div className='input-wrapper'>
                            <input
                                type="text"
                                ref={inputRef}
                                placeholder="请输入待办项"
                            />
                            <button
                                className='btn btn-primary'
                                onClick={submitValue}
                            >
                                增加
                            </button>
                        </div>
                    )
                    :
                    ''
            }

        </>
    )
}

export default AddInput